<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<title>termine</title>
	<h:outputStylesheet name="style.css" library="css" />
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
	<h:outputScript>
		PrimeFaces.locales['de'] = {
		    firstDay: 1,
		    ampm: false,
		};
		
		function showLoad(){
			document.getElementById('loading').style.display = 'block';
		}
	</h:outputScript>
</h:head>


<h:body>

	<!-- TITLE -->
	<div class="ui-corner-all ui-widget-header ui-widget titlebar">
		<div id="loading">
			<div id="rotateG_01" class="blockG"></div>
			<div id="rotateG_02" class="blockG"></div>
			<div id="rotateG_03" class="blockG"></div>
			<div id="rotateG_04" class="blockG"></div>
			<div id="rotateG_05" class="blockG"></div>
			<div id="rotateG_06" class="blockG"></div>
			<div id="rotateG_07" class="blockG"></div>
			<div id="rotateG_08" class="blockG"></div>
		</div>
		<h1 class="title">termine</h1>
	</div>

	<h:form id="templateform">
		<!-- MENU -->
		<div class="menubar">

			<p:menubar rendered="#{loginJSF.whoAmI == 'ANONYM'}">
				<p:menuitem value="login" url="/faces/anonym/login.xhtml"
					icon="ui-icon-bullet" />
				<p:menuitem value="register" url="/faces/anonym/register.xhtml"
					icon="ui-icon-bullet" />
			</p:menubar>

			<p:menubar rendered="#{loginJSF.whoAmI == 'CLIENT'}">
				<p:menuitem value="calendar" action="#{menuJSF.gotoClientCalendar}"
					icon="ui-icon-bullet" />
				<p:menuitem value="appointment" action="#{menuJSF.gotoAppointment}"
					icon="ui-icon-bullet" />
				<p:menuitem value="personal data"
					action="#{menuJSF.gotoPersonalData}" icon="ui-icon-bullet" />
				<p:menuitem value="switch to provider perspective"
					action="#{menuJSF.switchToProviderPerspective}"
					icon="ui-icon-bullet" rendered="#{loginJSF.personalData.provider}" />
				<p:menuitem value="logout" action="#{loginJSF.performLogout}" onstart="showLoad()"
					icon="ui-icon-bullet" />
			</p:menubar>

			<p:menubar rendered="#{loginJSF.whoAmI == 'PROVIDER'}">
				<p:menuitem value="calendar"
					action="#{menuJSF.gotoProviderCalendar}" icon="ui-icon-bullet" />
				<p:menuitem value="availability"
					action="#{menuJSF.gotoAvailabilityOverview}" icon="ui-icon-bullet" />
				<p:menuitem value="service" action="#{menuJSF.gotoServiceOverview}"
					icon="ui-icon-bullet" />
				<p:menuitem value="personal data"
					action="#{menuJSF.gotoPersonalData}" icon="ui-icon-bullet" />
				<p:menuitem value="switch to client perspective"
					action="#{menuJSF.switchToClientPerspective}" icon="ui-icon-bullet" />
				<p:menuitem value="logout" action="#{loginJSF.performLogout}" onstart="showLoad()"
					icon="ui-icon-bullet" />
			</p:menubar>

		</div>

		<!-- MESSAGES -->
		<p:growl id="growl" showDetail="true" />
	</h:form>

	<!-- CONTENT TO BE INSERTED -->
	<div>
		<ui:insert name="content" />
	</div>

	<!-- BUSY INDICATOR -->
	<!-- 	<p:ajaxStatus> -->
	<!-- 		<f:facet name="start"> -->
	<!-- 			<p:graphicImage value="resources/images/loading.gif" styleClass="loading"/> -->
	<!-- 		</f:facet> -->

	<!-- 		<f:facet name="complete"> -->
	<!-- 			<h:outputText value="" /> -->
	<!-- 		</f:facet> -->
	<!-- 	</p:ajaxStatus> -->

</h:body>
</html>